<template>
  <vxe-modal @close="cancel" title="选择关联IP" v-model="dialogVisible" width="80%" append-to-body showFooter
             esc-closable
             show-zoom resize>
    <div style="height: 75vh; overflow-y: auto;">
      <!-- 顶部搜索 -->
      <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="知识产权名称:" prop="zscqName">
              <el-input
                v-model="queryParams.zscqName"
                placeholder="请输入知识产权名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类别:" prop="lb">
              <el-input
                v-model="queryParams.lb"
                placeholder="请输入类别"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="授权/专利号:" prop="sqZlh">
              <el-input
                v-model="queryParams.sqZlh"
                placeholder="请输入授权/专利号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="知识产权编号:" prop="zscqBh">
              <el-input
                v-model="queryParams.zscqBh"
                placeholder="请输入知识产权编号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="获得方式:" prop="hdFs">
              <el-input
                v-model="queryParams.hdFs"
                placeholder="请输入获得方式"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- IP表列表 -->
      <el-table @row-click="clickRow" ref="table" :row-key="(row)=>{ return row.ipbId}" :reserve-selection="true"
                highlight-current-row :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                v-loading="loading" :data="ipbList" @selection-change="handleSelectionChange">
        <el-table-column :reserve-selection="true" type="selection" width="55" align="center"/>
        <el-table-column label="序号" align="center" type="index" :index="indexMethod"/>
        <el-table-column label="认定年度" align="center" prop="rdNd"/>
        <el-table-column label="授权年度" align="center" prop="sqNd"/>
        <el-table-column label="知识产权名称" align="center" prop="zscqName">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleButtonClick(scope.row)"
            >
              <el-link type="primary">{{ scope.row.zscqName }}</el-link>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="知识产权编号" align="center" prop="zscqBh"/>
        <el-table-column label="授权/专利号" align="center" prop="sqZlh"/>
        <el-table-column label="类别" align="center" prop="lb"/>
        <el-table-column label="授权日期" align="center" prop="sqRq" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sqRq, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="获得方式" align="center" prop="hdFs"/>
      </el-table>

      <!-- 列表分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button size="small" @click="submitForm">
        <svg-icon icon-class="confirm1" class-name='custom-class'/>
        确 定
      </el-button>
      <el-button size="small" @click="cancel">
        <svg-icon icon-class="cancel1" class-name='custom-class'/>
        取 消
      </el-button>
    </div>

    <!-- IP表详情 -->
    <IpbXq ref="ipbXq"/>

  </vxe-modal>
</template>

<script>
import {listIpb} from "@/api/gqgl/ipb";
import IpbXq from "@/views/gqgl/ipb/components/IpbXq.vue";

export default {
  name: "IPbDuoxBh",
  components: {IpbXq},
  inject: ['updateIPbBhLabel'],
  data() {
    return {
      // 总条数
      total: 0,
      // 显示搜索条件
      showSearch: true,
      dialogVisible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        zscqName: null,
        lb: null,
        rdNd: null,
        zscqBh: null,
        sqZlh: null,
        hdFs: null,
        idWhere: null,
        userId: null,
        deptId: null
      },
      ipbList: [],
      loading: false,
      getIpbList: null,
      ipbId: null,
      rdNd: null, //认定年度
    }
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ipbId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      const result = selection.reduce((acc, item) => {
        acc.ipbIds.push(item.ipbId);
        acc.zscqBhs.push(item.zscqBh);
        return acc;
      }, {ipbIds: [], zscqBhs: []});

      this.getIpbList = {
        ipbIdStr: result.ipbIds.join(','),    // 将ipbId组成字符串
        zscqBhStr: result.zscqBhs.join(',')   // 将zscqBh组成字符串
      };
    },
    //打开IP表详情
    handleButtonClick(row) {
      this.$refs.ipbXq.handleOpen(row);
    },
    /** 自定义序号 */
    indexMethod(index) {
      let pageNum = this.queryParams.pageNum - 1;
      if ((pageNum !== -1 && pageNum !== 0)) {
        return (index + 1) + (pageNum * this.queryParams.pageSize);
      } else {
        return (index + 1)
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    clickRow(row) {
      this.selectedRow = row; // 更新选中的行
      const table = this.$refs.table;
      table.toggleRowSelection(row);
    },
    /** 查询IP列表 */
    getList() {
      this.loading = true;
      this.queryParams.rdNd = this.rdNd
      listIpb(this.queryParams).then(response => {
        this.ipbList = response.rows;
        this.total = response.total;
        this.loading = false;

        // 默认选中已有的数据
        this.$nextTick(() => {
          if (this.ipbId == null) {

          } else {
            if (this.ipbId.length === 0) {
              this.$refs.table.clearSelection()
            }
            // ipbId
            if (!Array.isArray(this.ipbId)) {
              // 如果kjryId是一个字符串，尝试将其转换为数组
              this.ipbId = this.ipbId.split(',').map(id => id.trim())
            }
            this.ipbList.forEach(item => {
              if (this.ipbId.includes(item.ipbId)) {
                this.$refs.table.toggleRowSelection(item, true)
              } else {
                this.$refs.table.toggleRowSelection(item, false)
              }
            })
          }

        })

      });
    },
    handleOpen(data, rdNd) {
      // 接收来自父组件的数据
      this.ipbId = data
      this.rdNd = rdNd
      this.dialogVisible = true;
      this.getList();
    },
    submitForm() {
      this.updateIPbBhLabel(this.getIpbList)
      this.dialogVisible = false;
      this.$refs.table.clearSelection();
    },
    cancel() {
      this.dialogVisible = false;
      this.$refs.table.clearSelection();
    },


  }

}
</script>

<style scoped>

</style>
